<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .router-link-exact-active{
            color:white;
            background-color: green;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
    <div id="app">
        <div><input type="text" v-model="currentTime"></div>
        <div style="display: flex;align-items: center;justify-content:space-between">
            <span title="把时间改成YYYY-MM-DD HH:MM:SS格式得5分">当前时间：{{currentTime}}</span>
            <span title="根据时间读取对应的课程、教师、班级的10分">当前课程：{{currentCourse}}</span>
            <span title="根据时间读取对应的课程、教师、班级的10分">当前教师：{{currentTeacher}}</span>
            <span title="根据时间读取对应的课程、教师、班级的10分">当前班级：{{currentClass}}</span>
        </div>
        <keep-alive include="Home">
            <router-view></router-view>
        </keep-alive>
    </div>

    <template id="daohangTemp">
        <div style="display: flex;align-items: center;justify-content:space-between">
            <router-link to="/" >同学列表(20分)</router-link>

            <router-link to="/about">座位(20分)</router-link>

            <router-link to="/person">抽奖(45分)</router-link>
        </div>
    </template>
    
    <!----定义一些组件-->
    <template id="HomeTemp">
            <div>
                <daohang></daohang>
                <div>
                </div>
            </div>
    </template>


    <template id="AboutTemp">
        <div>
            <daohang></daohang>
            <br>
            <div>
            </div>
        </div>
    </template>


    <template id="PersonTemp">
        <div>
            <daohang></daohang>
            <br>
            <div>
                两个按钮，一个按钮点<button>开始</button> ，  然后在本试图中显示三个同学，不断的轮换背景色
                如
                
                <br>
                <ul>
                    <li>同学1</li>
                    <li style="background-color: green;">同学2</li>
                    <li>同学3</li>
                </ul>

                <br>
                点击<button>停止</button>，晚3秒在某个同学上停住背景色
            </div>
        </div>
    </template>

</body>
<script>

    var daoHang=Vue.component('daohang', {template: '#daohangTemp'});
    var Home=Vue.component('Home', {
        template: '#HomeTemp',
        data:function(){
            return {
                clickCounter:0
            }
        },
        methods:{
        },

        mounted:function(){
            console.log("组件被加载了");
            this.clickCounter=100;
        }
    });



    var About=Vue.component('About', {
        template: '#AboutTemp',
        data:function(){
            return{
            }
        },
        mounted:function(){
        }
    });



    var Person=Vue.component('Person', {
        template: '#PersonTemp',
        data:function(){
            return {
            }
        },
        methods:{
    
        },
        mounted:function(){
        }
    });

    // 创建 router 实例
    var router = new VueRouter({
      routes: [
        { path: '/', component: Home },
        { path: '/about', component: About },
        {path:"/person",component:Person}
      ]
    });

    // 创建和挂载根实例
    new Vue({
        data:{
            currentTime:new Date(),
            currentCourse:"无",
            currentClass:"无",
            currentTeacher:"无"
        },
        el: '#app',
        router // 使用 router 插件
    })
</script>
</html>